<template>
  <div class="content" style="width: 305px">
    <div class="title">
      <b></b>
      <p>分类统计</p>
    </div>
    <el-scrollbar style="height: 250px">
      <div id="sensor" class="sensor"></div>
    </el-scrollbar>
  </div>
</template>

<script>
import * as serviceApi from "../common/service.config";
import Axios from "axios";
export default {
  name: "SensorStatistics",
  data() {
    return {
      datas: {
        //表面位移
        surface: [
          { name: "正常", value: 0, label: {}, title: "表面位移" },
          { name: "故障", value: 0, label: {}, title: "表面位移" },
        ],
        //深部位移
        deep: [
          { name: "正常", value: 0, label: {}, title: "深部位移" },
          { name: "故障", value: 0, label: {}, title: "深部位移" },
        ],
        //裂缝
        crack: [
          { name: "正常", value: 0, label: {}, title: "裂缝" },
          { name: "故障", value: 0, label: {}, title: "裂缝" },
        ],
        //土壤湿度
        soil: [
          { name: "正常", value: 0, label: {}, title: "土壤湿度" },
          { name: "故障", value: 0, label: {}, title: "土壤湿度" },
        ],
        //流量
        flow: [
          { name: "正常", value: 0, label: {}, title: "流量" },
          { name: "故障", value: 0, label: {}, title: "流量" },
        ],
        //降雨量
        rain: [
          { name: "正常", value: 0, label: {}, title: "降雨量" },
          { name: "故障", value: 0, label: {}, title: "降雨量" },
        ],
      },
    };
  },
  mounted() {
    let fun = async () => {
      let myChart = this.$echarts.init(document.getElementById("sensor"));
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        async: true,
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        data:
          'appMsg={"parameter":"{}","serviceCode":"' +
          serviceApi.CONSTANT.LIST_MONITOR_AND_SENSOR +
          '","timestamp":"","uuid":""}',
      }).then((res) => {
        this.datas = {
          //表面位移
          surface: [
            { name: "正常", value: 0, label: {}, title: "表面位移" },
            { name: "故障", value: 0, label: {}, title: "表面位移" },
          ],
          //深部位移
          deep: [
            { name: "正常", value: 0, label: {}, title: "深部位移" },
            { name: "故障", value: 0, label: {}, title: "深部位移" },
          ],
          //裂缝
          crack: [
            { name: "正常", value: 0, label: {}, title: "裂缝" },
            { name: "故障", value: 0, label: {}, title: "裂缝" },
          ],
          //土壤湿度
          soil: [
            { name: "正常", value: 0, label: {}, title: "土壤湿度" },
            { name: "故障", value: 0, label: {}, title: "土壤湿度" },
          ],
          //流量
          flow: [
            { name: "正常", value: 0, label: {}, title: "流量" },
            { name: "故障", value: 0, label: {}, title: "流量" },
          ],
          //降雨量
          rain: [
            { name: "正常", value: 0, label: {}, title: "降雨量" },
            { name: "故障", value: 0, label: {}, title: "降雨量" },
          ],
        };
        let overList = res.data.parameter.list;
        for (let i = 0; i < overList.length; i++) {
          for (let j = 0; j < overList[i].sensorList.length; j++) {
            let num = overList[i].sensorList[j];
            switch (num.moduleEnum) {
              case "00":
                num.sensorStatus === "10"
                  ? this.datas.surface[0].value++
                  : num.sensorStatus === "30"
                  ? this.datas.surface[1].value++
                  : null;
                break;
              case "01":
                switch (num.dataType) {
                  case "01":
                    num.sensorStatus === "10"
                      ? this.datas.deep[0].value++
                      : num.sensorStatus === "30"
                      ? this.datas.deep[1].value++
                      : null;
                    break;
                  case "02":
                    num.sensorStatus === "10"
                      ? this.datas.crack[0].value++
                      : num.sensorStatus === "30"
                      ? this.datas.crack[1].value++
                      : null;
                    break;
                  case "04":
                    num.sensorStatus === "10"
                      ? this.datas.soil[0].value++
                      : num.sensorStatus === "30"
                      ? this.datas.soil[1].value++
                      : null;
                    break;
                  case "05":
                    num.sensorStatus === "10"
                      ? this.datas.flow[0].value++
                      : num.sensorStatus === "30"
                      ? this.datas.flow[1].value++
                      : null;
                }
                break;
              case "02":
                num.sensorStatus === "10"
                  ? this.datas.rain[0].value++
                  : num.sensorStatus === "30"
                  ? this.datas.rain[1].value++
                  : null;
            }
          }
        }
        let titleArr = [],
          seriesArr = [];
        for (let key in this.datas) {
          let item = this.datas[key];
          if (item[0].value != 0 || item[1].value != 0) {
            let titleObj = {
              subtext: item[0].title,
              subtextStyle: {
                color: "white",
                fontSize: "14",
              },
            };
            let seriesObj = {
              name: item[0].title,
              type: "pie",
              startAngle: 210,
              hoverAnimation: false,
              radius: ["30%", "22%"],
              avoidLabelOverlap: false,
              label: {
                position: "center",
                fontSize: 14,
                formatter: function (a) {
                  return a.value;
                },
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 18,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: (() => {
                let arr = this.datas[key];
                arr.push({ name: "__other", value: 0, label: {} });
                let num = 0;
                arr.map((item) => {
                  num += parseInt(item.value);
                });
                arr[arr.length - 1].value = num / 2;
                if (arr[1].value != 0) {
                  arr[0].label.show = false;
                  arr[2].label.show = false;
                } else {
                  arr[1].label.show = false;
                  arr[2].label.show = false;
                }
                if (arr[0].value == 0 && arr[1].value == 0) arr = [];
                return arr;
              })(),
            };
            titleArr.push(titleObj);
            seriesArr.push(seriesObj);
          }
        }
        let titleSiteArr = [
          { left: "9%", top: "25%" },
          { left: "54%", top: "25%" },
          { left: "14%", top: "58%" },
          { left: "54%", top: "58%" },
          { left: "14%", top: "91%" },
          { left: "57%", top: "91%" },
        ];
        let seriesSiteArr = [
          ["20%", "22%"],
          ["65%", "22%"],
          ["20%", "55%"],
          ["65%", "55%"],
          ["20%", "88%"],
          ["65%", "88%"],
        ];
        for (let i = 0; i < titleArr.length; i++) {
          titleArr[i].left = titleSiteArr[i].left;
          titleArr[i].top = titleSiteArr[i].top;
        }
        for (let i = 0; i < seriesArr.length; i++) {
          seriesArr[i].center = seriesSiteArr[i];
        }
        let option = {
          title: titleArr,
          legend: {
            textStyle: {
              color: "white",
            },
            data: ["正常", "故障"],
            left: "36%",
          },
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              let str;
              if (params.dataIndex == 2) {
                str = "";
              } else {
                str = `${params.seriesName}<br/>${params.name}: ${params.value}`;
              }
              return str;
            },
          },
          color: ["#00FD3D", "#FF1616", "transparent"],
          series: seriesArr,
        };
        myChart.clear();
        myChart.setOption(option);
      });
    };
    fun();
    const timer = setInterval(async () => {
      await fun();
    }, 1000 * 60);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
};
</script>

<style lang="less" scoped>
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
  .sensor {
    width: 300px;
    height: 375px;
  }
}
</style>